<template>
    <div style="width: 1300px">
        <el-container>
            <el-header style="background-color: #F3F3F3">
                <i class="el-icon-search" style="font-size: 25px;margin-right: 10px;vertical-align: middle"></i>筛选查询
                <div style="float: right;cursor: pointer">
                    <span @click="flas=false" v-if="flas"><i class="el-icon-d-caret"></i>展开筛选</span>
                    <span @click="flas=true" v-else=""><i class="el-icon-d-caret"></i>收起筛选</span>
                    <!--<el-button plain style="margin-left: 10px">高级检索</el-button>-->
                </div>
            </el-header>
            <el-main v-show="flas">
                <el-form ref="form" label-width="80px" >
                    <el-row>
                        <el-col :span="8"><div class="grid-content bg-purple"><!--@keyup.native-->
                            <el-form-item label="输入搜索:">
                                <el-input placeholder="商品名称" style="width: 220px"  v-model="from.input1" @change="keyup(from.input1,from.input2,from.input3)"/>
                            </el-form-item>
                        </div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple-light">
                            <el-form-item label="商品分类:">
                                <el-select v-model="from.input2" placeholder="选择商品分类" @change="keyup(from.input1,from.input2,from.input3)">
                                    <el-option label="选择商品分类" value=""></el-option>
                                    <el-option v-for="item in productclass" :label="item.title" :value="item.categrayId"></el-option>
                                </el-select>
                            </el-form-item>
                        </div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">
                            <el-form-item label="价格:">
                                <el-select v-model="from.input3" placeholder="请选择价格" @change="keyup(from.input1,from.input2,from.input3)">
                                    <el-option label="请选择价格" value=""></el-option>
                                    <el-option v-for="item in productnprice" :label="item.currentpriceProduct" :value="item.currentpriceProduct">￥{{item.currentpriceProduct}}</el-option>
                                </el-select>
                            </el-form-item>
                        </div></el-col>
                    </el-row>
                </el-form>
            </el-main>
        </el-container>
        <el-header style="background-color: #F3F3F3">
            <i class="el-icon-s-fold" style="font-size: 25px;margin-right: 10px;vertical-align: middle"></i>课程审核列表
        </el-header>
        <el-table
                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                border
                style="width: 100%"
                @select="handleSelectionChange">
            <el-table-column
                    type="selection">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="producctId"
                    label="编号">
            </el-table-column>
            <el-table-column prop="url" label="商品图片">
                <template slot-scope="scope">
                    <img :src="scope.row.mainImage" alt="" style="width: 50px;height: 50px">
                </template>
            </el-table-column>
            <el-table-column
                    prop="productName"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="currentpriceProduct"
                    label="现价">
                <template slot-scope="scope">
                    价格：￥{{scope.row.currentpriceProduct}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="originalpriceProduct"
                    label="原价">
                <template slot-scope="scope">
                    价格：￥{{scope.row.originalpriceProduct}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="分类">
            </el-table-column>
            <!--<el-table-column
                    prop="createUser"
                    label="上传人员">
            </el-table-column>-->
            <el-table-column
                    prop="productCstatus"
                    label="审核状态"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.productCstatus == 2">未审核</span>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="shangpingshenhetanchuang(scope.row)" type="text" size="small">审核</el-button>
                </template>
            </el-table-column>
        </el-table>




        <el-row>
            <el-col :span="8"><div class="grid-content bg-purple">
                <el-dropdown>
                    <el-button type="primary" size="mini">
                        批量操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-button plain @click="piliang = true">朴素按钮</el-button>
                    </el-dropdown-menu>
                </el-dropdown>

                <el-dialog title="商品审核" :visible.sync="piliang" width="30%">
                    <el-form label-width="80px">
                        <el-form-item label="商品审核:">
                            <el-radio-group v-model="redio1">
                                <el-radio v-model="redio1" label="全部审核通过"></el-radio>
                                <el-radio v-model="redio1" label="全部审核不通过"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="piliang = false">取 消</el-button>
                        <el-button type="primary" @click="piliangshenhe(zuizhongneirong,redio1)">确 定</el-button>
                    </div>
                </el-dialog>
            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light">
                <!-- 分页器 -->
                <div class="block" style="margin-top:15px;">
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[1,5,10,20]"
                                   :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="tableData.length">
                    </el-pagination>
                </div>
            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        </el-row>


        <!--点击查看弹出框-->
        <el-dialog title="查看商品信息" :visible.sync="dialogTableVisible">
            <el-table
                    :show-header="false"
                    :data="gridData"
                    border
                    :span-method="arraySpanMethod">
                <el-table-column align="center"  prop="we">
                    <el-table-column align="center"  prop="amount1"></el-table-column>
                    <el-table-column align="center" prop="amount2"></el-table-column>
                    <el-table-column align="center" prop="amount3"></el-table-column>
                    <el-table-column align="center" prop="amount4"></el-table-column>
                    <el-table-column align="center" prop="amount5"></el-table-column>
                    <el-table-column align="center" prop="amount6"></el-table-column></el-table-column>
            </el-table>

            <el-divider content-position="left">商品封面</el-divider>
            <img :src="tupian" width="178px" height="200px">
            <!--<el-divider content-position="left">课程视频</el-divider>
            <div class="videoArea">
                <video    :preload="preload"
                          :poster="videoImg" :height="height" :width="width" align="center" :controls="controls"  :autoplay="autoplay">
                    <source :src="videoSrc" type="video/mp4">
                </video>
            </div>-->
        </el-dialog>
        <!--     审核 -->
        <el-dialog title="商品审核" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="fromA" label-width="80px">
                <el-form-item label="商品名称:">
                    {{fromA.name}}
                </el-form-item>
                <el-form-item label="商品审核:">
                    <el-radio-group v-model="fromA.resource">
                        <el-radio v-model="redio" label="审核通过"></el-radio>
                        <el-radio v-model="redio" label="审核不通过"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="反馈详情:">
                    <el-input type="textarea" style="width: 300px" v-model="fromA.desc"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="kechengshenhe(fromA)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Kshenhe",
        data(){
            return{
                gridData: [{
                    amount1: "查看商品信息",
                },{
                    amount1: "商品名称：",
                    amount2: "",
                    amount3: "上传时间：",
                    amount4: "",
                    amount5: "上传人：",
                    amount6: "",
                },{
                    amount1: "商品售价：",
                    amount2: "",
                    amount3: "商品关键字：",
                    amount4: "",
                    amount5: "商品分类：",
                    amount6: "",
                },{
                    amount1: "点击量：",
                    amount2: "",
                },{
                    amount1: "商品简介：",
                    amount2: "",
                }],
                tupian:"",//图片路径

                productclass:[],//查询类别
                productnprice:[],//查询价格
                from:{
                    input1:"",
                    input2:"",
                    input3:""
                },
                fromA:{
                    id:"",//商品id
                    name:"",//商品名称
                    resource:"",//审核状态
                    desc:"",//备注
                    applydate:"",//发起时间
                    launch:"",//发起人
                    implement:"",//执行人
                    implementdate:""//执行时间
                },

                flas:true,
                input:"",
                url:[],
                tableData:[],
                dialogTableVisible: false,
                dialogFormVisible:false,
                redio:"审核不通过",
                redio1:"全部审核不通过",

                currentPage: 1, // 当前页码
                pageSize: 5 ,// 每页的数据条数

                zuizhongneirong:[],
                piliang:false
            }
        },
        methods: {
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                if (rowIndex == 0) {
                    if (columnIndex === 0) {
                        return [1, 6];
                    } else if (columnIndex === 1) {
                        return [0, 0];
                    }
                }
                if(rowIndex == 3){
                    if (columnIndex === 1) {
                        return [1, 5];
                    } else if (columnIndex === 1) {
                        return [0, 0];
                    }
                }
                if(rowIndex == 4){
                    if (columnIndex === 1) {
                        return [1, 5];
                    } else if (columnIndex === 1) {
                        return [0, 0];
                    }
                }
            },
            async keyup(input1,input2,input3) {
                if(input3==""){
                    input3=0;
                }
                var params = new URLSearchParams();
                params.append('productName',input1);
                params.append('categroyId',input2);
                params.append('currentpriceProduct',parseInt(input3));
                const Call = await this.$http.post("/product/mohucha",params) .then((res)=>{
                    this.tableData=res.data
                })
            },
            async goBack() {
                const res1 = await this.$http.post("/product/all") .then((res)=>{
                    this.tableData=res.data
                    this.productnprice=res.data
                })
                const res2 = await this.$http.post("/product/productclass") .then((res)=>{
                    this.productclass=res.data
                })
            },
            handleClick(row) {
                console.log(row);
                this.gridData[1].amount2=row.productName
                this.gridData[1].amount4=row.createDate
                this.gridData[1].amount6=row.createUser
                this.gridData[2].amount2=row.currentpriceProduct
                this.gridData[2].amount4=row.searchKeywords
                this.gridData[2].amount6=row.title
                this.gridData[3].amount2=row.hits
                this.gridData[4].amount2=row.productDescription
                this.tupian=row.mainImage

                this.dialogTableVisible = true
            },
            shangpingshenhetanchuang(row){
                var s1 = sessionStorage.getItem("user");
                var myDate = new Date();
                var thisDate = myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate();//获取当前时间

                this.fromA.implementdate=thisDate
                this.fromA.applydate=row.createDate
                this.fromA.implement=s1
                this.fromA.launch=row.createUser
                this.fromA.name=row.productName
                this.fromA.id=row.producctId
                this.dialogFormVisible=true;
            },
            async kechengshenhe(fromA){
                console.log(fromA)
                var params = new URLSearchParams();
                params.append('courseId',fromA.id);
                params.append('applyDate',fromA.applydate);
                params.append('launchId',fromA.launch);
                params.append('implementId',fromA.implement);
                params.append('implementDate',fromA.implementdate);
                params.append('result',fromA.resource);
                params.append('remarks',fromA.desc);
                params.append('type',3);
                const Call = await this.$http.post("/product/shenhe",params) .then((res)=>{
                    if(res.data==2){
                        this.$message({
                            message: '更改成功',
                            type: 'success'
                        });
                    }else{
                        this.$message({
                            message: '更改失败',
                            type: 'warning'
                        });
                    }
                })
                this.dialogFormVisible = false
            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            //单选框选中内容赋值给zuizhongneirong
            handleSelectionChange(val) {
                this.zuizhongneirong = val;
            },
            //批量审核的弹出框关闭
            async piliangshenhe(val, num) {
                this.piliang = false;
                console.log(val, num);
                var zuizhongid = [];
                for (let i = 0; i < val.length; i++) {
                    zuizhongid.push(val[i].producctId)
                }
                var params = new URLSearchParams();
                params.append('productName', input1);
                params.append('categroyId', input2);
                const Call = await this.$http.post("/product/mohucha", params).then((res) => {
                    this.tableData = res.data
                })
            }
        },
        created(){
            this.goBack();
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-valign: center;
        line-height: 60px;
    }
    div /deep/ .el-dialog__header {
        border-bottom: 2px solid #ebebeb;
    }
    /*.el-divider--horizontal{
        margin: -20px 0px 10px 0px;
        background: 0 0;
        border-top: 2px solid #e8eaec;
    }*/
</style>